<template>
  <div>
    <h3>门店修改</h3>
    <table class="table table-bordered">
      <tbody>
        <tr>
          <td align="right">门店名称</td>
          <td>
            <input type="text" v-model="info.ShopName" />
          </td>
        </tr>
        <tr>
          <td align="right">分店名称</td>
          <td>
            <input type="text" v-model="info.BranchName" />
          </td>
        </tr>
        <tr>
          <td align="right">门店图片</td>
          <td>
            <input type="file" @change="img" />
            <img
              :src="info.Photo"
              width="100"
              height="100"
              v-if="info.Photo != ''"
            />
          </td>
        </tr>
        <tr>
          <td align="right">开业时间</td>
          <td>
            <input type="date" v-model="info.OpenTime" />
          </td>
        </tr>
        <tr>
          <td align="right">是否启用</td>
          <td>
            <input
              type="radio"
              name="state"
              :value="1"
              v-model="info.State"
            />是
            <input
              type="radio"
              name="state"
              :value="0"
              v-model="info.State"
            />否
          </td>
        </tr>
        <tr>
          <td align="right">酒店特色</td>
          <td>
            <input
              type="checkbox"
              name="tese"
              value="办婚礼"
              v-model="info.TeSe"
            />办婚礼
            <input
              type="checkbox"
              name="tese"
              value="办满月"
              v-model="info.TeSe"
            />办满月
            <input
              type="checkbox"
              name="tese"
              value="升学宴"
              v-model="info.TeSe"
            />升学宴
            <input
              type="checkbox"
              name="tese"
              value="团建"
              v-model="info.TeSe"
            />团建
          </td>
        </tr>
        <tr>
          <td align="right">门店介绍</td>
          <td>
            <textarea cols="50" rows="5" v-model="info.Desc"></textarea>
          </td>
        </tr>
        <tr>
          <td align="right">门店地址</td>
          <td>
            <select v-model="info.AddRessId">
              <option value="">请选择</option>
              <option :value="item.Id" v-for="item in addressList">
                {{ item.AddressName }}
              </option>
            </select>
          </td>
        </tr>
        <tr>
          <td align="right">门店类型</td>
          <td>
            <select v-model="info.Type">
              <option value="">请选择</option>
              <option value="竞技酒店">竞技酒店</option>
              <option value="豪华酒店">豪华酒店</option>
              <option value="五星级酒店">五星级酒店</option>
            </select>
          </td>
        </tr>
        <tr>
          <td align="right"></td>
          <td>
            <input
              type="button"
              value="修改"
              class="btn btn-primary"
              @click="ok"
            />
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import axios from 'axios';
import moment from 'moment';
import { useRouter, useRoute } from 'vue-router';

const router = useRouter();
const route = useRoute();

//增加时后端需要的数据
let info: any = reactive({
  Id: route.query.id,
  ShopName: '',
  BranchName: '',
  Photo: '',
  OpenTime: '',
  State: 0,
  TeSe: [],
  Desc: '',
  AddRessId: '',
  Type: '',
});

let addressList: any = ref([]);

//生命周期
onMounted(() => {
  getAddressList();
  getData();
});

//修改的第二步:返填操作
const getData = () => {
  axios({
    url: '/api/Shops/GetShopModel',
    method: 'get',
    params: {
      id: route.query.id,
    },
  })
    .then((res) => {
      console.log(res);
      //info.ShopName = res.data.ShopName;
      Object.assign(info, res.data);
      info.OpenTime = res.data.OpenTime.substring(0, 10);
      info.TeSe = res.data.TeSe.split(','); //split()  作用将字符串转成数组
    })
    .catch((err) => {
      console.log(err);
    });
};

//1.做图片上传
const img = (e: any) => {
  //e表示事件对象

  //1.将图片转成formData格式
  let obj = e.target.files[0];
  let f = new FormData();
  f.append('file', obj);
  //2.发送网络请求
  axios({
    url: '/api/Imgs/Img',
    method: 'post',
    data: f,
  })
    .then((res) => {
      console.log(res);

      if (res.data == '不是图片') {
        alert('您上传的不是图片');
        return;
      }
      if (res.data == '大于2M') {
        alert('您上传的图片大于2M');
        return;
      }

      //上传的图片
      info.Photo = res.data;
    })
    .catch((err) => {
      console.log(err);
    });
};

//2.读取数据列表(地址)

const getAddressList = () => {
  axios({
    url: '/api/Shops/GetAddRessList',
    method: 'get',
  })
    .then((res) => {
      console.log(res);
      addressList.value = res.data;
    })
    .catch((err) => {
      console.log(err);
    });
};

//3.增加操作
const ok = () => {
  //1.有效性判断
  if (info.ShopName == '') {
    alert('门店名称不能为空');
    return;
  }

  if (info.BranchName == '') {
    alert('分店名称不能为空');
    return;
  }

  if (info.Photo == '') {
    alert('图片不能为空');
    return;
  }

  if (info.OpenTime == '') {
    alert('开业时间不能为空');
    return;
  }

  if (info.TeSe.length == 0) {
    alert('特色必选');
    return;
  }

  //门店介绍
  if (info.Desc == '') {
    alert('介绍不能为空');
    return;
  }
  if (isNaN(info.Desc) == true) {
    //isNaN 是不是一个数字 如果值false 不是是true
    alert('门店介绍只能是数字');
    return;
  }
  //门店介绍是大于0小1000之间的数字
  if (info.Desc < 0 || info.Desc > 1000) {
    alert('门店介绍不能大于1000小于0');
    return;
  }

  if (info.AddRessId == '') {
    alert('门店地址必选');
    return;
  }

  if (info.Type == '') {
    alert('门店类型必选');
    return;
  }
  //2.发送网络请求
  info.TeSe = info.TeSe.toString();
  axios({
    url: '/api/Shops/UpdateShopModel',
    method: 'put',
    data: info,
  })
    .then((res) => {
      console.log(res);
      if (res.data > 0) {
        alert('修改成功');
        router.push('/shopList');
      } else if (res.data == -1) {
        alert('门店名称重复');
        info.TeSe = [];
        return;
      } else {
        alert('修改失败');
        return;
      }
    })
    .catch((err) => {
      console.log(err);
    });
};
</script>

<style scoped></style>
